<template>

	<view class="content">
		<view style="width: 100%; margin: 0 auto; background-color: #fff;">
			<u-search placeholder="请输入关键字搜索" v-model="keyword" search-icon-color="#7a7a7a" placeholder-color="#7A7A7A"
				:show-action="true" bg-color="#f5f5f5" action-text="搜索" @search="searchKeyword" @custom="searchKeyword"
				:animation="false" :input-style="{'fontSize': '24' + 'upx', 'width': 'calc(100% - 50rpx)'}" style="width: calc(100% - 50rpx);
		   margin: 0 auto;"></u-search>
		</view>

		<view class="nav">
			<scroll-view scroll-x="true" class="scroll-view_H" enable-flex="true" >
				<view class="nav__item" :class="tabIdx == item.id ? '--focus' : ''" v-for="(item,index) in navList"
					:key="index" @click="changeNavItem(item.id)">
					{{item.name}}
					<view class="nav__bottom" v-if="tabIdx == item.id"></view>
				</view>
			</scroll-view>
		</view>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="chengtuan-box">
				<view class="chengtuan-list">
					<view class="chengtuan-item" v-for="(item, index) in homeCollage" :key="index">
						<view class="goods-img">
							<image :src="item.has_one_goods.thumb"></image>
						</view>
						<view class="goods-detail">
							<view class="goods-name group-title">{{item.title}} </view>
							<view class="group-info x-sc">
								<view class="group-total-memeber">{{item.member_num}}人团</view>
								<view class="y-cc" style="text-align: center; line-height: 18rpx; margin: 0 auto;">
									{{item.zj_user_num}}人中奖
								</view>
							</view>
							<view class="price-box">
								<view class="price-left">¥<text
										style="font-size: 30rpx; font-weight: bold;">{{item.group_price}}</text></view>
							</view>
						</view>
						<view class="right-box"
							@click="junit('/pages/index/goods-detail/goods-detail', {id: item.team_id});">
							<view style="margin-top: 19upx; font-size: 22rpx; color: #BFBEBE;">{{item.team_count}}人已参与
							</view>
							<view class="right-box-footer">
								<text>去参团</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				keyword: '',
				page: 1,
				tabIdx: 0,
				homeCollage: [],
				navList: [],
			}
		},
		mounted() {
			this.init()
			this.getCollageTab();
		},
		methods: {
			init() {
				this.getfightGroupsHome();
			},
			searchKeyword() {
				this.page = 1;
				this.$api.get('/addons/yun_shop/api.php?route=home-page.teamlist', {
					page: 1,
					keyword: this.keyword
				}).then(res => {
					this.homeCollage = res.data;
				}).catch(e => {
					this.downCallback();
				})

			},

			// 点击导航栏切换
			changeNavItem(id) {
				this.tabIdx = id;
				this.page = 1;
				this.homeCollage = [];
				this.downCallback();
			},
			getCollageTab() {
				this.$api.get(
					'/addons/yun_shop/api.php?uuid=0&route=plugin.fight-groups.frontend.controllers.fight-groups.catelist'
					).then(res => {
					if (res.result == 1) {
						console.log(res.data, '分类213312312321312');
						this.navList = res.data;
						this.tabIdx = res.data[0].id;
					}
				})
			},
			junit(url, query = {}) {
				this.$Router.push({
					path: url,
					query: query
				});
			},

			// 即将成团数据
			getfightGroupsHome() {
				this.$api.get('/addons/yun_shop/api.php?route=home-page.teamlist', {
					page: 1,
					keyword: this.keyword
				}).then(res => {
					this.homeCollage = res.data;
				})
			},

			// 下拉刷新列表
			downCallback() {
				this.mescroll.resetUpScroll(); // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
			},
			/*上拉加载的回调*/
			async upCallback(page) {
				this.page = page.num;
				this.$api.get('/addons/yun_shop/api.php?route=home-page.teamlist', {
					page: this.page,
					keyword: this.keyword,
					cate_id: this.tabIdx
				}).then(res => {
					console.log(123, res);
					let curPageData = res.data;
					let curPageLen = curPageData.length;
					let totalCount = res.data.total;
					if (page.num == 1) {
						this.homeCollage = []; //如果是第一页需手动置空列表
					}
					this.homeCollage = this.homeCollage.concat(curPageData); //追加新数据
					this.mescroll.endBySize(curPageLen, totalCount);
				}).catch(e => {
					this.homeCollage = []
					this.mescroll.endBySize(0, 0);
				})
			},
		}
	}
</script>

<style lang="scss">
	@import './group-list.scss'
</style>
